<template>
  <el-aside :width="width">
    <el-menu
       background-color="#2c3e50"
       text-color="#e6e6e6"
       :collapse="isCollapse"
       :collapse-transition="false"
       :default-active="activeMenu"
      >

      <h3 v-show="!isCollapse">Disk网盘</h3>
      <h3 v-show="isCollapse">网盘</h3>
      <!-- 单独home -->
      <el-menu-item @click="handleMenu(home)">
          <!-- icon组件使用方式 -->
          <component class="icons" :is="home.icon"></component>
          <span>{{home.label}}</span>
      </el-menu-item>
        <el-sub-menu 
            v-for="item in hasChildren"
            :key="item.path"
            :index="item.path" 
        >
          <template #title>
            <!-- icon组件使用方式 -->
            <component class="icons" :is="item.icon"></component>
            <span>{{item.label}}</span>
          </template>
          <el-menu-item-group >
            <el-menu-item 
                v-for="(subItem) in item.children"
                :key="subItem.path"
                :index="subItem.path" 
                @click="handleMenu(subItem)"
            >
            <!-- icon组件使用方式 -->
            <component class="icons" :is="subItem.icon"></component>
            <span>{{subItem.label}}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item 
          v-for="item in noChildren"
              :key="item.path"
              :index="item.path"
              @click="handleMenu(item)"
        >
            <!-- icon组件使用方式 -->
            <component class="icons" :is="item.icon"></component>
            <span>{{item.label}}</span>
        </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup>
import{ref,computed} from 'vue'
import {useAllDataStore} from '@/stores'
import{useRouter,useRoute} from 'vue-router'
import {fileStore} from '@/stores/disk/file'


const FileStore = fileStore()
const router = useRouter()
const route = useRoute()




//初始化侧边栏
const home =computed(()=>store.state.tags[0])
const list = computed(()=>store.state.menuList)
const noChildren=computed(()=>list.value.filter(item=>!item.children))
const hasChildren=computed(()=>list.value.filter(item=>item.children))


// 监听侧边栏折叠状态
const store =useAllDataStore()
const isCollapse = computed(()=>store.state.isCollapse)
const width = computed(()=>store.state.isCollapse ? '64px' : '180px')





const activeMenu = computed(()=>route.path)
// 点击菜单项
const handleMenu = (item) => {
  if(item.name==='home'){
    //改成根据路由名称跳转
    router.push('/home')
      //修改面包屑
    store.updateCurrentMenu(item.label)
    return
  }
  //清处二级面包屑
  FileStore.updateCurrentBread(null)
  //修改当前菜单索引
  FileStore.updateCurrentMenuIndex(item.index)
  //更新currentFolderPaht
  FileStore.updateCurrentFolderPaht('/')
  //渲染数据
  FileStore.initFileList()
  //修改面包屑
  store.updateCurrentMenu(item.label)
  //修改按钮状态
  FileStore.changeShowButton(false)
  //添加标签页
  store.selectMenu(item)
  //更新当前点击文件夹
  FileStore.updateCurrentClickFile(null)
  // 跳转页面
  router.push(item.path)
}
</script>




<style lang="less" scoped>
.icons{
    width: 18px;
    height: 18px;
    margin-right: 5px;
}
.el-menu{
    border-right: none;
    h3{
        line-height: 48px;
        color: #fff;
        text-align: center;
        background-color: #0c1e2b;
    }
}
.el-aside{
    height: 100%;
    background-color: #2c3e50;
}
</style>

